<body class="gray-bg">
    <div class="row">
        <div class="col-sm-3">
            <div class="">
                <div class="ibox-title"><h5>{:lang('选择部门')}</h5>
                    <div class="ibox-tools"><a class="refresh-tree">{:lang('refresh')}</a></div>
                </div>
                <div class="ibox-content no-padding">
                    <div id="left-tree" class="right_centent" data-url="{:url('SysDept/get_list_tree')}"> </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="">
                <div class="ibox-title">{$page_title}{:lang('select personnel')}</div>
                <div class="ibox-content table-responsive">
                    <div class="row">
                        <form id="pagerForm" method="post" class="form-inline searchForm">
                            <input type="hidden" name="pid" value="" placeholder="{:lang('部门编号')}">
                            <div class="col-sm-12">
                                <div class="input-group">
                                    <input type="text" name="keywords" placeholder="{:lang('enter keyword search')}" class="form-control">
                                </div>
                                <div class="input-group">
                                  <span class="input-group-btn">
                                  <button type="button" class="btn btn-primary ajaxSearchForm"><i class="fa fa-search"></i> {:lang('search')}</button>
                                  </span>
                                </div>
                            </div>
                        </form>
                    </div>
                    <table class="table table-hover sorttable ajax-list-table" data-url="{:url('SysUser/lookup')}">
                        <thead>
                        <tr>
                            <th width="22"><input type="checkbox" group="ids" class="checkboxCtrl"></th>
                            <th width="80">{:lang('accounts')}</th>
                            <th width="80">{:lang('realname')}</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot class="ibox-content">
                            <tr>
                                <td colspan="3" align="center"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="">
                <div class="ibox-title">{:lang('已选人员')}
                    <div class="ibox-tools">
                        <button class="btn btn-info btn-xs checkboxItemSave">{:lang('确认选择')}</button>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="checked-users-list" style="line-height: 30px;">
                    </div>
                </div>
            </div>
        </div>
    </div>

<script id="tableListTpl" type="text/html">
    <% for(var i=0;i<data.length;i++) { %>
    <tr>
        <td><input name="user_id" class="checkboxCtrlId" value="<%=data[i]['id']%>" data-name="<%=data[i]['realname']%>" type="checkbox">
            <div class="checkboxItem" style="display: none">
                <li data-id="<%=data[i]['id']%>" data-user-name="<%=data[i]['realname']%>">
                    <%=data[i]['realname']%> <a class="checkboxItemDel">[X]</a>
                </li>
            </div>
        </td>
        <td><%=data[i]['username']%></td>
        <td><%=data[i]['realname']%></td>
    </tr>
    <% } %>
</script>
<link href="__STATIC__/module/admin/js/plugins/bootstrap-treeview/bootstrap-treeview.min.css" rel="stylesheet">
<script src="__STATIC__/module/admin/js/plugins/bootstrap-treeview/bootstrap-treeview.js"></script>
<script src="__STATIC__/module/admin/js/lib/treeview.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        turnPage(1);//页面加载时初始化分页

        //得到父页面的清单，已经存在的值
        var ids_arr = [];
        var input_ids_val=parent.$("form input[name='{$input_ids}']").val();
        var input_text_val=parent.$("form input[name='{$input_text}']").val();
        var ids_arr=input_ids_val.split(',');
        var text_arr=input_text_val.split(',');
        var shtml='';
        $.each(ids_arr,function (index,val) {
            if(val!=''){
                shtml +='<li data-id="'+val+'" data-name="'+text_arr[index]+'">'+text_arr[index]+' <a class="checkboxItemDel">[X]</a></li>';
            }
        })
       $ ('.checked-users-list').append(shtml);
    });

    //获取窗口索引关闭窗口
    var list_add_index = parent.layer.getFrameIndex(window.name);
    //设置选中产品
    $("body").on("click", ".checkboxCtrlId", function () {
        var isck = $(this).prop('checked');
        var val = $(this).val();
        var name = $(this).attr('data-name');
        if (isck) {
            var html='<li data-id="'+val+'" data-name="'+name+'">'+name+' <a class="checkboxItemDel">[X]</a></li>';
            $('.checked-users-list').append(html);
        } else {
            delCheckItem(val);
        }
    });

    //设置全选择
    $("body").on("click", ".checkboxCtrl", function () {
        var isck = $(this).prop('checked');
        //表示全选择中
        if(isck){
            $('body .checkboxCtrlId').each(function (){
                var val = $(this).val();
                var name = $(this).attr('data-name');
                var html='<li data-id="'+val+'" data-name="'+name+'">'+name+' <a class="checkboxItemDel">[X]</a></li>';
                $('.checked-users-list').append(html);
            });
        }else{
            $('body .checkboxCtrlId').each(function (){
                var val = $(this).val();
                delCheckItem(val);
            });
        }
    });

    $("body").on("click", ".checkboxItemDel", function () {
        $(this).parent().remove();
    });

    $("body").on("click", ".checkboxItemSave", function () {
        var html = '';
        var user_id_arr=[];
        var user_name_arr=[];
        $('.checked-users-list').find('li').each(function () {
           var  user_id = $(this).attr('data-id');
            var users_name = $(this).attr('data-name');
            user_id_arr.push(user_id);
            user_name_arr.push(users_name);
        });
        parent.$("form input[name='{$input_ids}']").val(user_id_arr.join(','));
        parent.$("form input[name='{$input_text}']").val(user_name_arr.join(','));
        layer.msg("{:lang('添加成功')}", {icon: 1, shade: [0.5, '#000', true]});
        setTimeout(function () {
            parent.layer.close(list_add_index);
        }, 500);
    });

    function delCheckItem(val){
        $('.checked-users-list').find('li').each(function () {
            var id = $(this).attr('data-id');
            if (val == id) {
                $(this).remove();
            }
        })
    }

</script>